<template>
  <div class="ly-head">
    <div class="head-header">
      <ul class="head-header-left">
        <li><a href="www.baidu.com" target="_blank" class="default-entry"><span>首页</span></a></li>
        <li><a href="www.baidu.com" target="_blank" class="default-entry"><span>1赛事</span></a></li>
        <li><a href="www.baidu.com" target="_blank" class="default-entry"><span>2赛事</span></a></li>
        <li><a href="www.baidu.com" target="_blank" class="default-entry"><span>3赛事</span></a></li>
        <li><a href="www.baidu.com" target="_blank" class="default-entry"><span>4赛事</span></a></li>
        <li><a href="www.baidu.com" target="_blank" class="default-entry"><span>5赛事</span></a></li>
      </ul>
      <div class="head-header-middle">
        <div class="head-search">
          <form class="head-search-form" style="border-radius: 8px 8px 8px 8px;">
            <div class="head-search-content">
              <input class="head-search-input" type="text" autocomplete="off" accesskey="s" maxlength="100"
                     x-webkit-speech="" placeholder="《如何正确激怒一个人》" title="《如何正确激怒一个人》">
            </div>
            <div class="head-search-btn"><i class="el-icon-search" style="height: 17px;width: 17px"></i></div>
          </form>
        </div>
      </div>
      <ul class="head-header-right">
        <li><a href="www.baidu.com" target="_blank" class="default-entry"><span>首页</span></a></li>
        <li><a href="www.baidu.com" target="_blank" class="default-entry"><span>1赛事</span></a></li>
        <li><a href="www.baidu.com" target="_blank" class="default-entry"><span>2赛事</span></a></li>
        <li><a href="www.baidu.com" target="_blank" class="default-entry"><span>3赛事</span></a></li>
        <li><a href="www.baidu.com" target="_blank" class="default-entry"><span>4赛事</span></a></li>
        <li><a href="www.baidu.com" target="_blank" class="default-entry"><span>5赛事</span></a></li>
      </ul>
    </div>
    <div class="head-background">
      <a class="v-img">
        <img src="../../../assets/top.jpg"/>
      </a>
    </div>
    <div class="head-menu">
      <div class="head-menu-icon">
        <a class="icon-menu">
          <div class="icon-bg menu-one">
            <i class="el-icon-setting"></i>
          </div>
          <span class="icon-title">动态</span>
        </a>

        <a class="icon-menu">
          <div class="icon-bg menu-two">
            <i class="el-icon-setting"></i>
          </div>
          <span class="icon-title">热门</span>
        </a>

        <a class="icon-menu">
          <div class="icon-bg menu-three">
            <i class="el-icon-setting"></i>
          </div>
          <span class="icon-title">频道</span>
        </a>
      </div>


      <div class="head-menu-content">
        <div class="menu-content-left">
          <a class="menu-link" href="//www.bilibili.com/anime/" style="letter-spacing:2px;" target="_blank">番剧</a>
          <a class="menu-link" href="//www.bilibili.com/movie/" style="letter-spacing:2px;" target="_blank">电影</a>
          <a class="menu-link" href="//www.bilibili.com/guochuang/" style="letter-spacing:2px;" target="_blank">国创</a>
          <a class="menu-link" href="//www.bilibili.com/tv/" style="letter-spacing:2px;" target="_blank">电视剧</a>
          <a class="menu-link" href="//www.bilibili.com/variety/ " style="letter-spacing:2px;" target="_blank">综艺</a>
          <a class="menu-link" href="//www.bilibili.com/documentary/" style="letter-spacing:2px;"
             target="_blank">纪录片</a>
          <a class="menu-link" href="//www.bilibili.com/v/douga/" style="letter-spacing:2px;" target="_blank">动画</a>
          <a class="menu-link" href="//www.bilibili.com/v/game/" style="letter-spacing:2px;" target="_blank">游戏</a>
          <a class="menu-link" href="//www.bilibili.com/v/kichiku/" style="letter-spacing:2px;" target="_blank">鬼畜</a>
          <a class="menu-link" href="//www.bilibili.com/v/music" style="letter-spacing:2px;" target="_blank">音乐</a>
          <a class="menu-link" href="//www.bilibili.com/v/dance/" style="letter-spacing:2px;" target="_blank">舞蹈</a>
          <a class="menu-link" href="//www.bilibili.com/v/cinephile" style="letter-spacing:2px;"
             target="_blank">影视</a>
          <a class="menu-link" href="//www.bilibili.com/v/ent/" style="letter-spacing:2px;" target="_blank">娱乐</a>
          <a class="menu-link" href="//www.bilibili.com/v/knowledge/" style="letter-spacing:2px;"
             target="_blank">知识</a>
          <a class="menu-link" href="//www.bilibili.com/v/tech/" style="letter-spacing:2px;" target="_blank">科技</a>
          <a class="menu-link" href="//www.bilibili.com/v/information/" style="letter-spacing:2px;"
             target="_blank">资讯</a>
          <a class="menu-link" href="//www.bilibili.com/v/food" style="letter-spacing:2px;" target="_blank">美食</a>
          <a class="menu-link" href="//www.bilibili.com/v/life" style="letter-spacing:2px;" target="_blank">生活</a>
          <a class="menu-link" href="//www.bilibili.com/v/car" style="letter-spacing:2px;" target="_blank">汽车</a>
          <a class="menu-link" href="//www.bilibili.com/v/fashion" style="letter-spacing:2px;" target="_blank">时尚</a>
          <a class="menu-link" href="//www.bilibili.com/v/sports" style="letter-spacing:2px;" target="_blank">运动</a>
          <a class="menu-link" href="//www.bilibili.com/v/sports" style="letter-spacing:2px;" target="_blank">动物圈</a>
          <a class="menu-link" href="//www.bilibili.com/v/life/daily/#/530003" style="letter-spacing:2px;"
             target="_blank">VLOG</a>
          <a class="menu-link" href="//www.bilibili.com/v/life/funny" style="letter-spacing:2px;"
             target="_blank">搞笑</a>
          <a class="menu-link" href="//www.bilibili.com/v/life/funny" style="letter-spacing:2px;"
             target="_blank">单机游戏</a>
          <a class="menu-link" href="//www.bilibili.com/v/life/funny" style="letter-spacing:2px;"
             target="_blank">虚拟UP主</a>
          <a class="menu-link" href="//www.bilibili.com/v/life/funny" style="letter-spacing:2px;"
             target="_blank">公益</a>
          <a class="menu-link" href="//www.bilibili.com/v/life/funny" style="letter-spacing:2px;"
             target="_blank">公开课</a>
          <div id="menu-more" class="menu-link">
            <span>更多</span>
            <i class="el-icon-arrow-down" style="width: 10px;height: 10px"></i>
          </div>
        </div>


        <div class="menu-content-right">
          <a class="menu-label" href="//www.bilibili.com/read/home" style="letter-spacing:2px;" target="_blank">
            <i class="el-icon-eleme"></i>
            <span>专栏</span>
          </a>
          <a class="menu-label" href="//www.bilibili.com/read/home" style="letter-spacing:2px;" target="_blank">
            <i class="el-icon-eleme"></i>
            <span>专栏</span>
          </a>
          <a class="menu-label" href="//www.bilibili.com/read/home" style="letter-spacing:2px;" target="_blank">
            <i class="el-icon-eleme"></i>
            <span>专栏</span>
          </a>
          <a class="menu-label" href="//www.bilibili.com/read/home" style="letter-spacing:2px;" target="_blank">
            <i class="el-icon-eleme"></i>
            <span>专栏</span>
          </a>
          <a class="menu-label" href="//www.bilibili.com/read/home" style="letter-spacing:2px;" target="_blank">
            <i class="el-icon-eleme"></i>
            <span>社区中心</span>
          </a>
          <a class="menu-label" href="//www.bilibili.com/read/home" style="letter-spacing:2px;" target="_blank">
            <i class="el-icon-eleme"></i>
            <span>社区中心</span>
          </a>

        </div>


      </div>


    </div>
  </div>
</template>

<script>
export default {
  name: "ly_head"
}
</script>

<style scoped>
.ly-head {
  background-color: #fff;
  min-height: 64px;
  position: relative;
  margin: 0 auto;
  max-width: 2560px;
  width: 100%;
}


/*  顶部 */
.head-header {
  position: absolute;
  top: 0;
  z-index: 1002;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  max-width: 2560px;
  width: 100%;
  height: 64px;
}

/*  顶部  左*/
.head-header-left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-right: 30px;
}

.default-entry {
  margin-right: 20px;
  display: inline-block;
}

.head-header-left li a {
  height: 64px;
  line-height: 64px;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}

/*  顶部  中*/
.head-header-middle {
  flex: 1 auto;
  height: 38px;
}

.head-search {
  position: relative;
  margin: 0 auto;
  min-width: 181px;
  max-width: 500px;
}

.head-search-form {
  display: flex;
  align-items: center;
  padding: 0 48px 0 4px;
  position: relative;
  z-index: 1;
  overflow: hidden;
  line-height: 38px;
  border: 1px solid #e3e5e7;
  height: 40px;
  background-color: #f1f2f3;
  opacity: .9;
  transition: background-color .3s;
}

.head-search-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  padding: 0 8px;
  width: 100%;
  height: 32px;
  border: 2px solid transparent;
  border-radius: 6px;
}

.head-search-input {
  flex: 1;
  overflow: hidden;
  padding-right: 8px;
  border: none;
  background-color: transparent;
  box-shadow: none;
  color: #61666d;
  font-size: 14px;
  line-height: 20px;
}

.head-search-btn {
  position: absolute;
  top: 3px;
  right: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  color: #18191c;
  line-height: 32px;
  cursor: pointer;
  transition: background-color .3s;
}

/*  顶部  右*/
.head-header-right {
  display: flex;
  align-items: center;
  margin-left: 50px;
}

.head-header-right li {
  display: block;
  flex-shrink: 0;
  margin-right: 4px;
  min-width: 50px;
  text-align: center;
  cursor: pointer;
}

.head-header-right li a {
  color: #fff;
  font-size: 14px;
}


/*  顶部  背景图片*/
.head-background {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  margin: 0 auto;
  min-width: 1000px;
  min-height: 155px;
  height: 9.375vw;
  max-height: 240px;
  background-color: #e3e5e7;
  background-position: center 0;
  background-size: cover;
  background-repeat: no-repeat;
}

.v-img {
  position: absolute;
  object-fit: cover;
  display: inline-block;
  line-height: 1;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  background-color: #f1f2f3;
}

.v-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: inherit;
}


/*  顶部  导航*/
.head-menu {
  display: flex;
  align-items: center;
  background: #FFFFFF;
  position: relative;
  width: 100%;
  max-width: 2078px;
  margin: 0 auto;
}

/*  顶部  导航1*/
.head-menu-icon {
  z-index: 0;
  display: flex;
  align-items: center;
  margin-right: 10px;
}

.icon-menu {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-right: 16px;
  color: #222222;
}

.menu-one {
  background: #ff9212;
}

.menu-two {
  background: #f07775
}

.menu-three {
  background: #59ca73
}

.icon-bg {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  transition: background .3s;
}

.icon-title {
  text-align: center;
  font-size: 13px;
  line-height: 18px;
}

/*  顶部  导航2*/
.head-menu-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

/*  顶部  导航2-左*/
.menu-content-left {
  position: relative;
  display: grid;
  width: 100%;
  grid-auto-flow: column;
  grid-column: span 4;
  grid-gap: 10px;
  grid-template-rows: repeat(2, 1fr);
  border-right: 1px solid #d8dce5;
}

.menu-link {
  display: inline-block;
  box-sizing: content-box;
  width: 100%;
  height: 100%;
  border: 1px solid #f1f2f3;
  border-radius: 6px;
  background-color: #f6f7f8;
  color: #222222;
  text-align: center;
  font-weight: 400;
  transition: background-color .3s, color .3s;
}

/*  顶部  导航2-右*/
.menu-content-right {
  grid-column: span 1;
  grid-row-gap: 10px;
  grid-auto-flow: column;
  display: grid;
  grid-template-rows: repeat(2, 1fr);
  width: 168px;
  flex-shrink: 0;
}

.menu-label {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 100%;
  color: #61666d;
  text-align: center;
  font-weight: 400;
  transition: background-color .3s, color .3s;
}


@media (min-width: 2200px) {

  .head-menu {
    height: 130px;
    max-width: 2078px;
  }

  .head-menu-icon {
    margin-right: 20px;
  }

  .icon-menu {
    margin-right: 32px;
  }

  .icon-bg {
    width: 46px;
    height: 46px;
  }

  .icon-title {
    font-size: 15px;
    line-height: 20px;
  }

  .menu-content-left {
    padding-right: 30px;
    grid-template-columns: repeat(14, 1fr);
  }

  #menu-more {
    display: none;
  }

  .menu-link {
    font-size: 15px;
    height: 30px;
    line-height: 30px;
  }

  .menu-content-right {
    width: 258px;
  }

  .menu-label {
    height: 32px;
    font-size: 15px;
  }

}


@media (min-width: 1701px) and (max-width: 2199.9px) {

  .head-header-right {
    margin-left: 20px;
  }

  .head-menu {
    height: 120px;
    padding: 0 96px;
    max-width: 2270px;
  }

  .head-menu-icon {
    margin-right: 20px;
  }

  .icon-menu {
    margin-right: 24px;
  }

  .icon-bg {
    width: 46px;
    height: 46px;
  }

  .icon-title {
    font-size: 14px;
    line-height: 20px;
  }


  .menu-content-left {
    padding-right: 30px;
    grid-template-columns: repeat(12, 1fr);
  }

  .menu-content-left > *:nth-of-type(1n + 24) {
    display: none !important;
  }

  .menu-link {
    font-size: 14px;
    height: 30px;
    line-height: 30px;
  }


  .menu-content-right {
    width: 258px;
  }


  .menu-label {
    height: 32px;
    font-size: 14px;
  }


}


@media (min-width: 1367px) and (max-width: 1700.9px) {

  .head-header-right {
    margin-left: 10px;
  }

  .head-menu {
    height: 110px;
    padding: 0 64px;
  }

  .head-menu-icon {
    margin-right: 8px;
  }

  .icon-menu {
    margin-right: 24px;
  }

  .icon-bg {
    width: 46px;
    height: 46px;
  }

  .icon-title {
    font-size: 14px;
    line-height: 20px;
  }

  .menu-content-left {
    padding-right: 30px;
    grid-template-columns: repeat(11, 1fr);
  }

  .menu-content-left > *:nth-of-type(1n + 22) {
    display: none !important;
  }

  .menu-link {
    font-size: 14px;
    height: 26px;
    line-height: 26px;
  }


  .menu-content-right {
    width: 240px;
  }

  .menu-label {
    font-size: 14px;
    height: 28px;
  }


}


@media (min-width: 1100px) and (max-width: 1366.9px) {
  .head-header-left {
    margin-right: 10px;
  }

  .head-header-right {
    margin-left: 10px;
  }

  .head-menu {
    height: 100px;
    padding: 0 56px;
  }


  .head-menu-icon {
    margin-right: 4px;
  }

  .icon-menu {
    margin-right: 16px;
  }

  .icon-bg {
    width: 40px;
    height: 40px;
  }

  .menu-content-left {
    padding-right: 20px;
    grid-template-columns: repeat(9, 1fr);
  }

  .menu-content-left > *:nth-of-type(1n + 18) {
    display: none !important;
  }

  .menu-link {
    font-size: 13px;
    height: 26px;
    line-height: 26px;
  }

  .menu-content-right {
    width: 230px;
  }

  .menu-label {
    font-size: 13px;
    height: 28px;
  }


}


@media (max-width: 1099.9px) {

  .head-header-left {
    margin-right: 10px;
  }

  .head-header-right {
    margin-left: 10px;
  }


  .head-menu {
    height: 100px;
    padding: 0 56px;
  }

  .head-menu-icon {
    margin-right: 4px;
  }

  .icon-menu {
    margin-right: 10px;
  }

  .icon-bg {
    width: 40px;
    height: 40px;
  }

  .menu-content-left {
    padding-right: 20px;
    grid-template-columns: repeat(9, 1fr);
  }

  .menu-content-left > *:nth-of-type(1n + 18) {
    display: none !important;
  }

  .menu-link {
    font-size: 13px;
    height: 22px;
    line-height: 22px;
  }

  .menu-content-right {
    width: 168px;
  }

  .menu-label {
    font-size: 13px;
    height: 28px;
  }


}


</style>
